// 底部导航点击详情页
<template>
  <div class="referentialMarket">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1200">
      <div class="content">
        <!-- 左侧导航 -->
        <div class="content-left">
          <el-tree
            ref="myTree"
            :data="data"
            :props="defaultProps"
            :default-expand-all="ExpandAll"
            :highlight-current="highlight"
            node-key="id"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>

        <!-- 右侧导航 -->
        <div class="content-right">
          <router-view></router-view>
          <!-- 需要传递相应的参数 -->
        </div>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>

export default {
  name: "footerDetails",

  data() {
    return {
      myTree: "myTree",
      ExpandAll: true, // 全部展開
      highlight: true,
      data: [
        {
          label: "交易购物",
          children: [
            {
              label: "购物流程",
              id: 1
            },
            {
              label: "免费注册",
              id: 2
            },
            {
              label: "发票须知",
              id: 3
            },
            {
              label: "支付方式",
              id: 4
            },
            {
              label: "常见问题",
              id: 5
            }
          ]
        },
        {
          label: "物流配送",
          children: [
            {
              label: "配送说明",
              id: 6
            },
            {
              label: "配送须知",
              id: 7
            },
            {
              label: "验货签收",
              id: 8
            },
            {
              label: "配送答疑",
              id: 9
            }
          ]
        },
        {
          label: "售后服务",
          children: [
            {
              label: "退货范围",
              id: 10
            },
            {
              label: "退货细则",
              id: 11
            },
            {
              label: "退款说明",
              id: 12
            },
            {
              label: "售后联系方式",
              id: 13
            }
          ]
        },
        {
          label: "协议条款",
          children: [
            {
              label: "平台服务协议",
              id: 14
            },
            {
              label: "会员隐私政策",
              id: 15
            },
            {
              label: "平台使用条款",
              id: 16
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },

      navindex: -1 // 总nav 传值
    }
  },

  methods: {

    handleNodeClick(data) {
      console.log(data)
      let id = data.id
      this.$store.commit('treeId',id)  // 刷新后数据的保存
      switch (id) {
        case 1:
          this.$router.push({
            name: 'content1',
          })
          break
        case 2:
          this.$router.push({
            name: 'content2'
          })
          break
        case 3:
          this.$router.push({
            name: 'content3'
          })
          break
        case 4:
          this.$router.push({
            name: 'content4'
          })
          break
        case 5:
          this.$router.push({
            name: 'content5'
          })
          break
        case 6:
          this.$router.push({
            name: 'content6'
          })
          break
        case 7:
          this.$router.push({
            name: 'content7'
          })
          break
        case 8:
          this.$router.push({
            name: 'content8'
          })
          break
        case 9:
          this.$router.push({
            name: 'content9'
          })
          break
        case 10:
          this.$router.push({
            name: 'content10'
          })
          break
        case 11:
          this.$router.push({
            name: 'content11'
          })
          break
        case 12:
          this.$router.push({
            name: 'content12'
          })
          break
        case 13:
          this.$router.push({
            name: 'content13'
          })
          break
        case 14:
          this.$router.push({
            name: 'content14'
          })
          break
        case 15:
          this.$router.push({
            name: 'content15'
          })
          break
        case 16:
          this.$router.push({
            name: 'content16'
          })
          break
      }
    },

    // 刷新后数据为空的bug修复
    pageInit() {
      
      let id = this.$route.params.id 
      if (id) {
        this.$store.commit('treeId',id)
        // 路由传值
        this.$nextTick( () => {
          this.$refs.myTree.setCurrentKey(id)  // treeBox 元素的ref   value 绑定的node-key
        })
      } else{
        this.$nextTick( () => {
          this.$refs.myTree.setCurrentKey(this.$store.state.treeId)  // treeBox 元素的ref   value 绑定的node-key
        })
      }
    }
  },

  updated() {
    this.pageInit() // 刷新的bug修复  传值展现
  },
  mounted() {
    this.pageInit() // 刷新的bug修复  传值展现
  }
}
</script>
<style lang="scss" scoped>
.referentialMarket {
  .w1200 {
    width: 1200px;
    margin: auto;
    .content {
      width: 1200px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 20px;
      .content-left {
        width: 212px;
      }
    }
  }
}
</style>


